<template>

  <!--系统主页-->
  <div class="layout">
    <Layout>
      <Header>
        <Menu mode="horizontal" theme="dark" active-name="1">
          <div class="layout-logo"></div>
          <div class="layout-nav">
            <MenuItem name="1">
              <Icon type="ios-navigate"></Icon>
              菜单一
            </MenuItem>
          </div>
        </Menu>
      </Header>
      <!--侧边栏-->
      <Layout>
        <Sider hide-trigger :style="{background:'#fff', width: '100px'}">
          <template>
            <Card style="width: 100%;">
              <div style="text-align: center;">
                <img src="../assets/logo.png" style="max-width: 130px"/>
                <h3>超级系统</h3>
              </div>
            </Card>
          </template>
          <Menu :active-name="$router.path" theme="light" width="auto" :open-names="['setting']">
            <template v-for="(item, index) in menuList">
              <Submenu :name="item.name" :key="index">
                <template slot="title">
                  <Icon :type="item.menuIcon"></Icon>
                  {{item.menuDesc}}
                </template>
                <MenuItem v-for="(child,index) in item.children" :key="index" :name="child.path" :to="child.path">
                  {{child.menuDesc}}
                </MenuItem>
              </Submenu>
            </template>
          </Menu>
        </Sider>
        <Layout :style="{padding: '0 24px 24px'}">

          <transition name="fade" mode="out-in">
            <router-view/>
          </transition>

          <Footer class="layout-footer">
            2018 - 2023 &copy; NCHU software school
          </Footer>
        </Layout>
      </Layout>
    </Layout>
  </div>

</template>

<script>
  import {arguproperities} from '../constants/ArguConstants'

  let initMenu = function () {
    console.log('hhahah init menus');
    for (let idx in this.$router.options.routes) {
      let rootMenu = this.$router.options.routes[idx];
      if (rootMenu.hidden) {
        continue;
      }

      let childMenuList = [];
      for (let childIdx in rootMenu.children) {
        let childMenu = rootMenu.children[childIdx];
        if (childMenu.hidden) {
          continue;
        }
        childMenuList.push(childMenu)
      }
      if (childMenuList.length < 1) {
        continue;
      }
      rootMenu.children = childMenuList;
      this.menuList.push(rootMenu);
    }
  }
  export default {
    name: 'MainFramework',
    data() {
      return {
        breadcrumbStyle: arguproperities.breadcrumbStyle,
        menuList: []
      }
    },
    methods: {
      initMenu
    },
    mounted: function () {
      this.initMenu();
    }
  }
</script>

<style scoped>

  .layout {
    border: 1px solid #d7dde4;
    background: #f5f7f9;
    border-radius: 4px;
    overflow: hidden;
  }

  .layout-logo {
    width: 100px;
    height: 30px;
    background: #5f6270;
    border-radius: 3px;
    float: left;
    position: relative;
    top: 15px;
    left: 20px;
  }

  .layout-nav {
    float: right;
    margin: 0 auto;
    margin-right: 20px;
  }

  .layout-footer {
    text-align: center;
  }

</style>
